
<template>
    <div class="video-list" @click.stop="jumpDetail">
        <div class="imgWrap">
            <img class="play" src="/static/image/play-list.png" alt="">
            <image-loader :src="dataItem.video+'?x-oss-process=video/snapshot,t_7000,f_jpg,w_200'" width="100%" height="338rpx" ></image-loader>
        </div>

        <div class="content">{{content}}</div>
    </div> 
</template>

<script>
import * as api from '@/utils/api' ; 
import {baseUrl} from '@/utils/config' ;   
const app = getApp();
export default {
    onLoad() {
        this.content = this.dataItem.content
    },
    props: {  
        dataItem:{
            default:{},   
            type:Object
        }, 
    }, 
    data(){
        return {  
            content: ''
        }
    },  
    methods:{
        jumpDetail(){
            this.$emit('jumpDetail',this.dataItem)
        },
    }
}
</script>

<style scoped lang="scss">
    .video-list {
        width: 50%;
        height: 231px;
        position: relative;
        display: flex;
        flex-direction:column;
        align-items: center;


        .imgWrap {
            width: 100%;
            height: 169px;
            padding: 0 2px;
            position: relative;
            
            .play {
                position: absolute;
                bottom: 16px;
                left: 16px;
                width: 32px;
                height: 32px;
            }
        }

        .content {
            width:155px;
            height:43px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(53,64,82,1);
            line-height:20px;
            margin-top: 7px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;  // 控制多行的行数
            -webkit-box-orient: vertical;
        }
    }

</style>
